/*
 *  WORK CAPABILITIES
 *
 */

$WorkCapabilitiesIconSizeSmall: 180px;
$WorkCapabilitiesIconSizeMedium: 200px;
$WorkCapabilitiesIconSizeLarge: 240px;

.work-capabilities {
  position: relative;
  height: $WorkCapabilitiesIconSizeSmall;
  margin: 30px 0 50px;

  @media screen and (min-width: $bp-tablet) {
    margin: 50px 0 80px;
  }
  @media screen and (min-width: $bp-large) {
    margin: 60px 0 100px;
  }

  ul.working {
    &:after {
      content: "";
      display: block;
      position: relative;
      list-style-type: none;
      width: $WorkCapabilitiesIconSizeSmall;
      height: $WorkCapabilitiesIconSizeSmall;
      border-radius: 50%;
      margin: 0 auto;
      background-color: #1a1b21;
      background-repeat: no-repeat;
      background-position: 50%;
      background-size: ($WorkCapabilitiesIconSizeSmall - 30px) ($WorkCapabilitiesIconSizeSmall - 30px);
      background-image: url('/images/illustration-change-and-transform.svg');

      @media screen and (min-width: $bp-medium) {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: transparent;
        width: 100%;
        height: 100px;
        background-image: url('/images/illustration-change-and-transform-large.svg');
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: 66% auto;
        margin-top: -4px;
      }

      @media screen and (min-width: $bp-large) {
        margin-top: -7px;
      }
    }
  }

  li {
    position: relative;
    list-style-type: none;
    width: $WorkCapabilitiesIconSizeSmall;
    height: $WorkCapabilitiesIconSizeSmall;
    border-radius: 50%;
    margin: 0 auto;
    background-color: #1a1b21;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: ($WorkCapabilitiesIconSizeSmall - 30px) ($WorkCapabilitiesIconSizeSmall - 30px);

    &:not(.selected) {
      display: none;
    }

    &.discovery {
      background-image: url('/images/illustration-discovery.svg');
    }
    &.design {
      background-image: url('/images/illustration-design-and-build.svg');
    }
    &.launch {
      &:after {
        position: absolute;
        left: 28%;
        top: 0;
        content: "";
        width: 100%;
        height: 100%;
        background-image: url('/images/illustration-launch-and-scale.svg');
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: 100% auto;
      }
    }
    &.working {
      background-image: url('/images/illustration-change-and-transform.svg');
    }

    button {
      display: none;
    }
  }

  @media screen and (min-width: $bp-medium) {
    height: $WorkCapabilitiesIconSizeMedium;

    ul {
      display: flex;
      justify-content: space-between;
    }

    li {
      position: relative;
      width: $WorkCapabilitiesIconSizeMedium;
      height: $WorkCapabilitiesIconSizeMedium;
      margin: 0;
      background-color: #1a1b21;
      background-size: ($WorkCapabilitiesIconSizeMedium - 40px) ($WorkCapabilitiesIconSizeMedium - 40px);

      &:not(.selected) {
        display: block;
        background: none;

        &:after {
          display: none;
        }
      }

      button {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-direction: column;
        width: 100%;
        height: 100%;
      }

      .work-capabilities-item-title {
        line-height: 1.2;
        margin-bottom: 22px;
        width: 70%;
      }
    }
  }

  @media screen and (min-width: $bp-large) {
    height: $WorkCapabilitiesIconSizeLarge;

    li {
      width: $WorkCapabilitiesIconSizeLarge;
      height: $WorkCapabilitiesIconSizeLarge;
      background-size: ($WorkCapabilitiesIconSizeLarge - 40px) ($WorkCapabilitiesIconSizeLarge - 40px);
    }
  }
}

@media screen and (min-width: $bp-medium) {
  .work-capabilities-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;

    .capabilities-dotted {
      position: relative;
      width: 50%;
      height: 3px;
      background-image: url('/images/work/capabilities-line-bg.png');
      background-repeat: repeat-x;
      background-position: 0 50%;
      background-size: auto 3px;
      margin-left: ($WorkCapabilitiesIconSizeMedium * .5) + 18px;
      margin-right: 18px;

      &:before,
      &:after {
        content: "";
        position: absolute;
        width: 24px;
      	height: 24px;
      	opacity: 0.3;
      	border: solid 3px #979797;
        border-radius: 50%;
        margin-top: -10px;
      }

      &:before {
        left: -32px;
      }
      &:after {
        right: -32px;
      }

      &:last-child {
        margin-right: ($WorkCapabilitiesIconSizeMedium * .5) + 18px;
        margin-left: 18px;

        &:before {
          display: none;
        }
      }
    }
  }
}

@media screen and (min-width: $bp-large) {
  .work-capabilities-bg {

    .capabilities-dotted {
      margin-left: ($WorkCapabilitiesIconSizeLarge * .5) + 18px;

      &:last-child {
        margin-right: ($WorkCapabilitiesIconSizeLarge * .5) + 18px;
      }
    }
  }
}

.work-discovery-strategy,
.work-design-build,
.work-launch-scale,
.work-change-transform {
  background-color: $c-solid;
}
